<template>
  <div id="grzx">
    <!-- 顶部导航 -->
    <top-bar>
      <site slot="tleft"></site> <tb-right slot="tright"></tb-right>
    </top-bar>
    <!-- 搜索框 -->
    <search-wp>
      <LOGO slot="logo"></LOGO>
      <search slot="search"></search>
      <pegs slot="pegs"></pegs>
    </search-wp>
    <!-- 头部导航 -->
    <top-nav></top-nav>
    <!-- 个人中心 -->
    <div class="grzx-cont">
      <el-container>
        <!-- 侧导航 -->
        <el-aside width="200px">
          <!-- <grzx-nav></grzx-nav> -->
          <div id="gr-nav">
            <h3>个人中心</h3>
            <hr class="xian" />
            <ul class="gr-nav">
              <li>
                <span>交易管理 <i>&gt;</i></span>
                <ul>
                  <router-link tag="li" to="/grzx/wdzh">我的账户</router-link>
                  <router-link tag="li" to="/grzx/wddd">我的订单</router-link>
                  <router-link tag="li" to="/grzx/wdjf">我的积分</router-link>
                  <router-link tag="li" to="/grzx/jfdd">积分订单</router-link>
                  <router-link tag="li" to="/grzx/wdqb">我的钱包</router-link>
                </ul>
              </li>
              <li>
                <span>会员资料<i>&gt;</i></span>
                <ul>
                  <router-link tag="li" to="/grzx/grzl">个人资料</router-link>
                  <router-link tag="li" to="/grzx/dzgl">地址管理</router-link>
                  <router-link tag="li" to="/grzx/wdsc">我的收藏</router-link>
                  <router-link tag="li" to="/grzx/zjll">最近浏览</router-link>
                  <router-link tag="li" to="/grzx/xgmm">修改密码</router-link>
                </ul>
              </li>
              <li>
                <span>站内信<i>&gt;</i></span>
                <ul>
                  <router-link tag="li" to="/grzx/wdxx">我的消息</router-link>
                  <router-link tag="li" to="/grzx/yjfk">意见反馈</router-link>
                </ul>
              </li>
            </ul>
          </div>
        </el-aside>
        <!-- 主体 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </div>
 <bottom></bottom>

  </div>
   
</template>

<script>
//顶部导航
import topBar from '@/components/header/topBar.vue';
import site from '@/components/header/site.vue';
import tbRight from '@/components/header/tbRight.vue';

// 搜索层
import LOGO from '@/components/search/logo.vue';
import search from '@/components/search/search.vue';
import pegs from '@/components/search/pegs.vue';
import searchWp from '@/components/search/searchWp.vue';

// 导航
import TopNav from '@/views/common/zcw/TopNav.vue';

// 个人中心组件

import Bottom from '@/components/bottom/bottom.vue';

export default {
  name: 'grzx',
  components: {
    topBar,
    site,
    tbRight,

    LOGO,
    search,
    pegs,
    searchWp,

    TopNav,

    Bottom,
  },
};
</script>

<style scoped>
.grzx-cont {
  width: 1280px;
  margin: 20px auto;
  box-sizing: border-box;
  padding: 20px;
  margin-bottom: 40px;
}
.el-aside {
  width: 170px;
}
#gr-nav h3 {
  font-size: 18px;
  color: #666;
}
.xian {
  color: #e7e7e7;
  width: 200px;
  position: absolute;
  left: 0;
  top: 60px;
}
#gr-nav span {
  font-size: 16px;
  color: #666;
}

.gr-nav > li {
  margin-top: 25px;
}

.gr-nav ul li {
  margin-top: 20px;
  color: #999;
  font-size: 14px;
  cursor: pointer;
}
.el-aside {
  border: 1px solid #e7e7e7;
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.el-container i {
  display: inline-block;
  width: 17px;
  height: 17px;
  color: #333;
  text-align: center;
  line-height: 17px;
  margin-left: 27px;
}
.el-main {
  padding: 0;
}
.gr-nav ul li.router-link-active {
  color: #498e3d;
  text-decoration: underline;
}
</style>
